<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Container Family: Dialog Quickstart Example</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/container/container-min.js"></script>


<!--begin custom header content for this example-->
<script type="text/javascript">
document.documentElement.className = "yui-pe";
</script>

<style type="text/css">
#example {
    height:30em;
}

label { 
    display:block;
    float:left;
    width:45%;
    clear:left;
}

.clear {
    clear:both;
}

#resp {
    margin:10px;
    padding:5px;
    border:1px solid #ccc;
    background:#fff;
}

#resp li {
    font-family:monospace
}

.yui-pe .yui-pe-content {
    display:none;
}
</style>

<!--end custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Container Family: Dialog Quickstart Example</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Container Family: Dialog Quickstart Example</h1>
	
	<div class="exampleIntro">
	<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page &mdash; whether interally to the page or by sending the information to the server via form post or XMLHttpRequest.  This example shows how to do the latter.  Click the button to show the Dialog instance and its form fields; fill out the form; submit the form.  Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="dialog-quickstart_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<script>
YAHOO.namespace("example.container");

YAHOO.util.Event.onDOMReady(function () {
	
	// Define various event handlers for Dialog
	var handleSubmit = function() {
		this.submit();
	};
	var handleCancel = function() {
		this.cancel();
	};
	var handleSuccess = function(o) {
		var response = o.responseText;
		response = response.split("<!")[0];
		document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
		alert("Submission failed: " + o.status);
	};

    // Remove progressively enhanced content class, just before creating the module
    YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");

	// Instantiate the Dialog
	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
							{ width : "30em",
							  fixedcenter : true,
							  visible : false, 
							  constraintoviewport : true,
							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
								      { text:"Cancel", handler:handleCancel } ]
							});

	// Validate the entries in the form to require that both first and last name are entered
	YAHOO.example.container.dialog1.validate = function() {
		var data = this.getData();
		if (data.firstname == "" || data.lastname == "") {
			alert("Please enter your first and last names.");
			return false;
		} else {
			return true;
		}
	};

	// Wire up the success and failure handlers
	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
						     failure: handleFailure };
	
	// Render the Dialog
	YAHOO.example.container.dialog1.render();

	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
});
</script>

<div>
<button id="show">Show dialog1</button> 
<button id="hide">Hide dialog1</button>
</div>

<div id="dialog1" class="yui-pe-content">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="assets/post.php">
	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
	<label for="email">E-mail:</label><input type="textbox" name="email" /> 

	<label for="state[]">State:</label>
	<select multiple name="state[]">
		<option value="California">California</option>
		<option value="New Jersey">New Jersey</option>
		<option value="New York">New York</option>
	</select> 

	<div class="clear"></div>

	<label for="radiobuttons">Radio buttons:</label>
	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
	<input type="radio" name="radiobuttons[]" value="2" /> 2
	
	<div class="clear"></div>

	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
	
	<div class="clear"></div>
		
	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

	<div class="clear"></div>

	<label for="cbarray">Multi checkbox:</label>
	<input type="checkbox" name="cbarray[]" value="1" /> 1
	<input type="checkbox" name="cbarray[]" value="2" /> 2
</form>
</div>
</div>

<div id="resp">Server response will be displayed in this area</div>	
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Getting Started with the Dialog Control</h2>

<p>The Dialog component is an extension of Panel that is meant to emulate the behavior of an dialog window using a floating, draggable HTML element. Dialog provides an interface for easily gathering information from the user without leaving the underlying page context. The information gathered is collected via a standard HTML form; Dialog supports the submission of form data  through XMLHttpRequest, through a normal form submission, or through a manual script-based response (where the script reads and responds to the form values and the form is never actually submitted to the server).</p>

<p>Instantiating a Dialog is very similar to other controls in the Container collection. In this tutorial, we will create a Dialog from existing markup where the container element's id is "dialog1":</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
			{ width : "300px",
			  fixedcenter : true,
			  visible : false, 
			  constraintoviewport : true,
			  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
						  { text:"Cancel", handler:handleCancel } ]
			 } );
</textarea>

<p>The properties for <em>width</em>, <em>fixedcenter</em>, <em>visible</em>, and <em>constraintoviewport</em> are inherited from Panel. Unique to the Dialog control is the <em>buttons</em> property, which takes an array of object literals representing the buttons that will be rendered in the Dialog's footer. Each one of these button literals has three possible properties: "text" which represents the button text, "handler" which is a reference to the function that will execute when the button is clicked, and "isDefault" which will apply a bold style to the button when set to true.</p>

<p>Next, we must define the <em>handleCancel</em> and <em>handleSubmit</em> handlers for our buttons. In this tutorial, the submit and cancel buttons will call the corresponding functions in the Dialog:</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Define various event handlers for Dialog
var handleSubmit = function() {
	this.submit();
};
var handleCancel = function() {
	this.cancel();
};
</textarea>

<p>By default, the Dialog is submitted using the <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a>. In order to handle the response from the server, we must define callback functions that will execute when the submission has occurred. First, we will define the functions, and then we will set them into our Dialog's <em>callback</em> &mdash; the same callback object that will be passed to Connection Manager's <em>asyncRequest</em> method. For the purposes of this example, the success handler will simply diplay the server response on the page. The failure handler will alert the response status code, if something goes wrong:</p>

<textarea name="code" class="JScript" cols="60" rows="1">
var handleSuccess = function(o) {
	var response = o.responseText;
	response = response.split("<!")[0];
	document.getElementById("resp").innerHTML = response;
};

var handleFailure = function(o) {
	alert("Submission failed: " + o.status);
};

YAHOO.example.container.dialog1.callback = { success: handleSuccess,
											 failure: handleFailure };
</textarea>

<p>You can also take advantage of Dialog's built-in validation function so that you can verify that the values entered by the user are valid prior to form submission. In this tutorial, we will verify that the user has entered, at the very least, a first and last name. Using the <em>getData</em> function, we can easily query the values of the form fields. In a valid scenario, the function should return true, otherwise the function should return false, which will prevent the submission:</p>

<textarea name="code" class="JScript" cols="60" rows="1">		
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
	var data = this.getData();
	if (data.firstname == "" || data.lastname == "") {
		alert("Please enter your first and last names.");
		return false;
	} else {
		return true;
	}
};
</textarea>

<p>Finally, we will build the markup for the Dialog. A Dialog contains a form whose fields will be submitted to the server. Note that the URL where the form will be submitted is specified in the "action" attribute of the form.</p>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="dialog1" class="yui-pe-content">
	<div class="hd">Please enter your information</div>
	<div class="bd">
		<form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php">
			<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
			<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
			<label for="email">E-mail:</label><input type="textbox" name="email" /> 

			<label for="state[]">State:</label>
			<select multiple name="state[]">
				<option value="California">California</option>
				<option value="New Jersey">New Jersey</option>
				<option value="New York">New York</option>
			</select> 

				<div class="clear"></div>

			<label for="radiobuttons">Radio buttons:</label>
			<input type="radio" name="radiobuttons[]" value="1" checked/> 1
			<input type="radio" name="radiobuttons[]" value="2" /> 2
			
				<div class="clear"></div>

			<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
			
			<label for="textarea">Text area:</label>&lt;textarea name="textarea"&gt;&lt;/textarea&gt;

				<div class="clear"></div>

			<label for="cbarray">Multi checkbox:</label>
			<input type="checkbox" name="cbarray[]" value="1" /> 1
			<input type="checkbox" name="cbarray[]" value="2" /> 2
		</form>
	</div>
</div>
</textarea>

<p>NOTE: This example also uses the technique described in the <a href="module.html">Module</a> example to hide the markup for the Dialog for JavaScript enabled clients, by adding the <code>yui-pe-content</code> class to the markup, and them removing it just before instantiating the Dialog.</p>
<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?connection&button&dragdrop&container&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerGloss"><p><strong>Note:</strong> Logging and debugging is currently turned off for this example.</p> 
							<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="dialog-quickstart_log.html">Reload with logging<br />
	 and debugging enabled.</a></span></span></p></div>
	
						</div>
					
				
					<div id="examples">
						<h3>Container Family Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../container/module.html'>The Module Control</a></li><li><a href='../container/overlay.html'>Creating and Positioning an Overlay</a></li><li><a href='../container/tooltip.html'>Simple Tooltip Example</a></li><li><a href='../container/tooltip-multi.html'>One Tooltip, Many Context Elements</a></li><li><a href='../container/panel.html'>Simple Panel Example</a></li><li><a href='../container/panelskin1.html'>Skinning a Panel with Custom CSS: Introduction</a></li><li><a href='../container/panelskin2.html'>Skinning a Panel with Custom CSS: Advanced</a></li><li><a href='../container/panel-loading.html'>Creating a Modal "Loading" Panel</a></li><li><a href='../container/panel-resize.html'>Creating a Resizable Panel</a></li><li class='selected'><a href='../container/dialog-quickstart.html'>Dialog Quickstart Example</a></li><li><a href='../container/simpledialog-quickstart.html'>SimpleDialog Quickstart Example</a></li><li><a href='../container/container-effect.html'>Using ContainerEffect Transitions</a></li><li><a href='../container/overlaymanager.html'>Using the Overlay Manager to Manage Multiple Panels</a></li><li><a href='../container/keylistener.html'>Implementing Container Keyboard Shortcuts with KeyListener</a></li><li><a href='../button/button-ariaplugin.html'>Using the Button ARIA Plugin (included with examples for Button Control)</a></li><li><a href='../container/container-ariaplugin.html'>Using the Container ARIA Plugin</a></li><li><a href='../button/button-menu-select.html'>Using A Menu Button To Replace A &#60;select&#62; Element (included with examples for Button Control)</a></li><li><a href='../button/button-menu-swap.html'>Replacing the content of a Button's Menu (included with examples for Button Control)</a></li><li><a href='../colorpicker/colorpicker-dialog-from-script.html'>Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)</a></li><li><a href='../layout/panel_layout.html'>Layout inside a resizable Panel (included with examples for Layout Manager)</a></li><li><a href='../editor/dialog_editor.html'>Editor in a Dialog Control (included with examples for Rich Text Editor)</a></li><li><a href='../button/btn_example07.html'>Menu Buttons (included with examples for Button Control)</a></li><li><a href='../calendar/calcontainer.html'>Popup Calendar - Advanced (included with examples for Calendar Control)</a></li><li><a href='../datatable/dt_colshowhide.html'>Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)</a></li><li><a href='../button/btn_example08.html'>Split Buttons (included with examples for Button Control)</a></li><li><a href='../button/btn_example09.html'>Simple Calendar Menu Button (included with examples for Button Control)</a></li><li><a href='../button/btn_example10.html'>Calendar Menu Button with Date on Button Face (included with examples for Button Control)</a></li><li><a href='../button/btn_example11.html'>Color Picker Button (included with examples for Button Control)</a></li><li><a href='../button/btn_example12.html'>Fixed Width Menu Button (included with examples for Button Control)</a></li><li><a href='../menu/programsmenu.html'>OS-Style Programs Menu (included with examples for Menu Family)</a></li><li><a href='../menu/applicationmenubar.html'>Application Menubar (included with examples for Menu Family)</a></li><li><a href='../button/btn_example14.html'>Slider Button (included with examples for Button Control)</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Container Family Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/container/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_container.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/container.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="selected "><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
